<template>
    <div class="container">
        <el-table :data="spu.skus" style="width: 100%">
            <el-table-column label="属性组合">
                <el-table-column
                    :label="item.attrName"
                    v-for="(item, index) in tableAttrColumn"
                    :key="item.attrId"
                >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{
                            scope.row.attr[index].attrValue
                        }}</span>
                    </template>
                </el-table-column>
            </el-table-column>

            <el-table-column label="商品名称" prop="skuName">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.skuName"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="标题" prop="skuTitle">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.skuTitle"></el-input>
                </template>
            </el-table-column>
            <el-table-column label="副标题" prop="skuSubtitle">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.skuSubtitle"></el-input>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 规格属性
            saleAttrs: [
                {
                    attrId: 1,
                    attrName: "颜色",
                    attrValues: ["红色", "绿色", "黑色"]
                },
                { attrId: 2, attrName: "网络", attrValues: ["4G", "5G"] }
            ],

            // SKU表格的销售属性列名
            tableAttrColumn: [],

            spu: {
                //要提交的数据
                spuName: "",
                spuDescription: "",
                catalogId: 0,
                brandId: "",
                weight: "",
                publishStatus: 0,
                decript: [], //商品详情
                images: [], //商品图集，最后sku也可以新增
                bounds: {
                    //积分
                    buyBounds: 0,
                    growBounds: 0
                },
                baseAttrs: [], //基本属性
                skus: [] //所有sku信息
            }
        };
    },
    created() {
        this.generateSkus();
    },
    methods: {
        /**
         * 根据销售属性生成SKU组合
         */
        generateSkus() {
            let selectValues = [];

            this.saleAttrs.forEach(item => {
                if (item.attrValues.length > 0) {
                    // 收集销售属性值，进行笛卡尔积运算生成SKU组合
                    selectValues.push(item.attrValues);
                    // 销售属性列名称
                    this.tableAttrColumn.push(item);
                }
            });

            //根据笛卡尔积运算进行生成sku组合
            let descartes = this.descartes(selectValues);
            console.log("SKU生成的组合", descartes);

            //有多少descartes就有多少sku
            let skus = [];
            descartes.forEach((descar, descaridx) => {
                let attrArray = []; //sku属性组
                descar.forEach((de, index) => {
                    //构造saleAttr信息
                    let saleAttrItem = {
                        attrId: this.tableAttrColumn[index].attrId,
                        attrName: this.tableAttrColumn[index].attrName,
                        attrValue: de
                    };
                    attrArray.push(saleAttrItem);
                });

                skus.push({
                    attr: attrArray,
                    descar: descar,

                    skuName: null,
                    price: 0,
                    skuTitle: null,
                    skuSubtitle: "",
                    images: [],
                    fullCount: 0,
                    discount: 0,
                    countStatus: 0,
                    fullPrice: 0.0,
                    reducePrice: 0.0,
                    priceStatus: 0,
                    memberPrice: 0.0
                });
            });

            // SKU销售属性组合列表
            this.spu.skus = skus;
        },

        /**
         * 笛卡尔积运算，生成SKU销售组合
         */
        descartes(list) {
            //parent上一级索引;count指针计数
            var point = {};

            var result = [];
            var pIndex = null;
            var tempCount = 0;
            var temp = [];

            //根据参数列生成指针对象
            for (var index in list) {
                if (typeof list[index] == "object") {
                    point[index] = { parent: pIndex, count: 0 };
                    pIndex = index;
                }
            }

            //单维度数据结构直接返回
            if (pIndex == null) {
                return list;
            }

            //动态生成笛卡尔积
            while (true) {
                for (var index in list) {
                    tempCount = point[index]["count"];
                    temp.push(list[index][tempCount]);
                }

                //压入结果数组
                result.push(temp);
                temp = [];

                //检查指针最大值问题
                while (true) {
                    if (point[index]["count"] + 1 >= list[index].length) {
                        point[index]["count"] = 0;
                        pIndex = point[index]["parent"];
                        if (pIndex == null) {
                            return result;
                        }

                        //赋值parent进行再次检查
                        index = pIndex;
                    } else {
                        point[index]["count"]++;
                        break;
                    }
                }
            }
        }
    }
};
</script>

<style scoped></style>
